@import '../../styles/var.scss';

.m-descriptions {
  display: grid;
  grid-template-columns: repeat(2, calc((100% - 16px) / 2));
  column-gap: 16px;
  row-gap: 16px;

  &-align-right {
    .m-descriptions-item-content {
      text-align: right;
    }
  }

  &-item {
    display: flex;
    align-items: flex-start;
    font-size: 26px;
    font-weight: 400;

    &-full {
      grid-column: 1 / 3;
    }

    &-label {
      position: relative;
      padding-right: 16px;
      color: $text-color-secondary;
      flex-shrink: 0;

      &-colon {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
      }
    }

    &-content {
      flex: 1;
      color: $text-color-main;
      overflow: hidden;
    }
  }
}
